<script setup>
import {computed, ref} from 'vue';
import {useRoute} from "vue-router";
import {ChatRound, DataLine, Document, Folder, FolderAdd, FolderOpened, Postcard, UserFilled} from "@element-plus/icons-vue";
import {useStore} from "@/stores/store.js";
import DataView from "@/views/data/DataView.vue";
const route = useRoute()
const activeMenu = computed(() => route.path)

// 添加一个 ref 来管理侧栏的折叠状态
const isCollapsed = ref(false);

// 切换侧栏的函数
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value;
}
const searchQuery = ref('')
const performSearch = () => {
  console.log('搜索内容:', searchQuery.value);
}
</script>

<template>
  <el-container style="height: 100vh;overflow: hidden">
    <el-menu class="menu-demo" :collapse="isCollapsed" active-text-color="#6e39cb" :default-active="activeMenu" router>
        <el-button
            :icon="isCollapsed ? 'ArrowRightBold' : 'ArrowLeftBold'"
            @click="toggleSidebar"
            circle
            style="position: absolute; z-index: 9999;right: 0; top: 50%; transform: translate(50%, -50%);"
        ></el-button>

        <img width="100" height="100" style="margin: 0 auto" src="@/assets/logo.png">

        <el-menu-item index="/home">
          <el-icon size="12" style="margin-right: 7px"><House /></el-icon><span>首页</span>
        </el-menu-item>
        <el-sub-menu index="/approval">
          <template #title><el-icon  size="12" style="margin-right: 7px"><Document/></el-icon><span>审批模块</span></template>
          <el-menu-item style="padding-left: 20px" index="/approval/musician">
            <el-icon size="12" style="margin-right: 7px"><Document/></el-icon> 音乐人审批
          </el-menu-item>
          <el-menu-item style="padding-left: 20px" index="/approval/album">
            <el-icon size="12" style="margin-right: 7px"><Document/></el-icon> 专辑审批
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/management/musician">
          <el-icon size="12" style="margin-right: 7px"><UserFilled /></el-icon><span>音乐人管理</span>
        </el-menu-item>
        <el-sub-menu index="/post">
          <template #title><el-icon  size="12" style="margin-right: 7px"><Postcard /></el-icon><span>帖子模块</span></template>

          <el-menu-item index="/post/management">
            <el-icon size="12" style="margin-right: 7px"><Postcard /></el-icon><span>帖子管理</span>
          </el-menu-item>
          <el-menu-item index="/post/hot">
            <el-icon size="12" style="margin-right: 7px"><Postcard /></el-icon><span>热度操控</span>
          </el-menu-item>

        </el-sub-menu>
        <el-menu-item index="/management/comment">
          <el-icon size="12" style="margin-right: 7px"><ChatRound /></el-icon><span>评论管理</span>
        </el-menu-item>
        <el-sub-menu index="/data">
          <template #title><el-icon  size="12" style="margin-right: 7px"><Folder /></el-icon><span>数据管理</span></template>
          <el-menu-item index="/data/management">
            <el-icon size="12" style="margin-right: 7px"><FolderOpened /></el-icon>数据操控
          </el-menu-item>
          <el-menu-item index="/data/view">
            <el-icon size="12" style="margin-right: 7px" ><DataLine /></el-icon>数据可视化
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

    <el-scrollbar style="flex: 1;padding: 0; background: #f4f5f9;">

      <el-header class="header" style="padding: 30px; display: flex; box-shadow: 0 1px 5px #dccafd;
       align-items: center;background: #e7e7f4">
        <el-text type="info" style="font-size: 17px;font-weight: bold;white-space: pre">{{ route.meta.description }}</el-text>

        <el-input
            v-model="searchQuery"
            placeholder="搜索..."
            clearable
            prefix-icon="Search"
            @keyup.enter="performSearch"
            class="search-input"
        ></el-input>
        <el-button icon="Bell" style="margin-right: 20px" circle />
        <el-text style="margin-right: 20px">{{ useStore().admin.email }}</el-text>
        <img style="width: 40px;height: 40px;border-radius: 50%"  :src="useStore().admin.avatar">
      </el-header>
      <div style="padding-left: 12px;">
        <router-view ></router-view>

      </div>
    </el-scrollbar>
  </el-container>
</template>

<style scoped>
:deep(.header .search-input) {
  width: 300px!important;
  margin-left: auto;
  margin-right: 20px;
}
:deep(.header .search-input .el-input__inner) {
  height: 40px;
}
:deep(.header .el-input__wrapper input) {
  padding-left: 10px;
}

</style>

